import ProgressiveImage from "react-progressive-graceful-image";
import imageBg from "../../assets/images/ProgressiveImage/bg.png";
import imageOrg from "../../assets/images/ProgressiveImage/imageOrg.png";
import imageTemp from "../../assets/images/ProgressiveImage/imageTemp.png";
import "../../common/common.css";

export default function ProgressiveImageReact() {
    return (
        <div>
            <h3>ProgressiveImage</h3>
            <div>
                <button className="returnButton">
                    <a href="/">点击返回主菜单</a>
                </button>
            </div>
            <p>正常加载的图片是一部分一部分加载处理的，使用渐进式加载的图片先加载缩略图然后等原图加载完成后替换的。</p>
            <div style={{ display: "flex", width: "100%" }}>
                <div>
                    <h3>正常加载</h3>
                    <img src={imageBg} alt="" style={{ width: "100%", height: "calc(70vh)" }} />
                </div>
                <div>
                    <h3>渐进式图片加载</h3>
                    <ProgressiveImage src={imageOrg} placeholder={imageTemp}>
                        {(src: any) => <img src={src} alt="an image" style={{ width: "100%", height: "calc(70vh)" }} />}
                    </ProgressiveImage>
                </div>
            </div>
        </div>
    );
}
